import { createRouter, createWebHistory } from 'vue-router'
import Dashboard from '../views/Dashboard.vue'
import SystemMonitor from '../views/SystemMonitor.vue'
import NetworkConfig from '../views/NetworkConfig.vue'
import DockerManager from '../views/DockerManager.vue'
import ExperimentManager from '../views/ExperimentManager.vue'
import DeviceSettings from '../views/DeviceSettings.vue'
import serviceManager from '../services/serviceManager.js'

const routes = [
  {
    path: '/',
    name: 'Dashboard',
    component: Dashboard,
    meta: { title: '设备概览' }
  },
  {
    path: '/monitor',
    name: 'SystemMonitor',
    component: SystemMonitor,
    meta: { title: '系统监控' }
  },
  {
    path: '/network',
    name: 'NetworkConfig',
    component: NetworkConfig,
    meta: { title: '网络配置' }
  },
  {
    path: '/docker',
    name: 'DockerManager',
    component: DockerManager,
    meta: { title: 'Docker管理' }
  },
  {
    path: '/experiment',
    name: 'ExperimentManager',
    component: ExperimentManager,
    meta: { title: '实验管理' }
  },
  {
    path: '/settings',
    name: 'DeviceSettings',
    component: DeviceSettings,
    meta: { title: '设备设置' }
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

// 路由守卫：页面进入时启动相应服务
router.beforeEach(async (to, from, next) => {
  console.log(`[Router] 路由导航: ${from.path} -> ${to.path}`)
  
  // 设置页面标题
  document.title = to.meta.title || 'MoBox Dashboard'
  
  // 启动目标页面所需的服务
  await serviceManager.enterPage(to.path)
  
  next()
})

// 路由守卫：页面离开时的处理
router.afterEach((to, from) => {
  // 处理页面切换后的服务管理
  if (from.path !== to.path) {
    serviceManager.leavePage(from.path, to.path)
  }
})

export default router 